<template>
  <div class="searchBox">
    <div class="label">
      <input type="text" placeholder="资讯搜索" v-model="search">
      <span class="btn" @click="goSearch">搜索</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchBox",
  data() {
    return {
      search: ''
    }
  },
  methods: {
    goSearch() {
      this.$router.push({
        name: 'searchHome',
        query: {
          search: this.search
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.searchBox {
  .label {
    display: flex;
    border: 1px solid #DADADA;
    border-radius: 4px;
    input {
      padding: 0 10px;
      outline: none;
      width: 125px;
      height: 32px;
      border: 1px solid #fefefe;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .btn {
      cursor: pointer;
      display: inline-block;
      width: 46px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 12px;
      background: #F3F3F3;
      border: 1px solid #F3F3F3;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}
</style>